
		
		
        
		
		<!-- 1a) Optional: add a theme file -->
		<!--
			<script type="text/javascript" src="../js/themes/gray.js"></script>
		-->
		
		<!-- 1b) Optional: the exporting module -->
		<script type="text/javascript" src="../../views/js/modules_highcharts/exporting.js"></script>
		
		
		<!-- 2. Add the JavaScript to initialize the chart on document ready -->
		<script type="text/javascript">
		
			var chart;
			$(document).ready(function() {
				chart = new Highcharts.Chart({
					chart: {
						renderTo: 'container',
						defaultSeriesType: 'line',
						marginRight: 130,
						marginBottom: 25
					},
					title: {
						text: "{bookName}'s Statistic",
						x: -20 //center
					},
					xAxis: {
						categories: [{MyxAxis}]
					},
					yAxis: {
						plotLines: [{
							value: 0,
							width: 1,
							color: '#808080',
						}],
                        title: {text: 'Number of Like-Share-Retweet'}
					},
					tooltip: {
						formatter: function() {
				                return '<b>'+ this.series.name +'</b><br/>'+
								this.x +': '+ this.y;
						}
					},
					legend: {
						layout: 'vertical',
						align: 'right',
						verticalAlign: 'top',
						x: -10,
						y: 100,
						borderWidth: 0
					},
					series: [{
						name: 'Like',
						data: [{likeFB}]
					}, {
						name: 'Share',
						data: [{shareFB}]
					}, {
						name: 'Retweet',
						data: [{retweetTT}]
					}]
				});
			});
				
		</script>




        <div id="tabvanilla2" class="widget">

            <ul class="tabnav">
                <li><a href="#popular">Chart</a></li>
                <li><a href="#recent">Table</a></li>
            </ul>

            <div id="popular" class="tabdiv">
              
              <!-- tab 1 here -->
		
		<!-- 3. Add the container -->
		<div id="container" style="width: 750px; height: 380px; margin: 0 auto"></div>

                <!-- end tab 1 -->              
              
            </div><!--/popular-->
            
            <div id="recent" class="tabdiv">
                {tableContent}
            </div><!--/recent-->
           

        </div><!--/widget-->
         <script>
            function parseMon(mon)
            { 
                if (mon == 'JAN'){
                    return 1;
                };
                if (mon == 'FEB'){
                    return 2;
                };
                if (mon == 'MAR'){
                    return 3;
                };
                if (mon == 'APR'){
                    return 4;
                };
                if (mon == 'MAY'){
                    return 5;
                };
                if (mon == 'JUN'){
                    return 6;
                };
                if (mon == 'JUL'){
                    return 7;
                };
                if (mon == 'AUG'){
                    return 8;
                };
                if (mon == 'SEP'){
                    return 9;
                };
                if (mon == 'OCT'){
                    return 10;
                };
                if (mon == 'NOV'){
                    return 11;
                };
                if (mon == 'DEC'){
                    return 12;
                } 
                
            }
            function checkFromTo(from, to)
            {               
                
                var dt1  = parseInt(from.substring(0,2));                
                var mon1 = parseMon(from.substring(3,6));                          
                var yr1  = parseInt(from.substring(7,11));
                
                var dt2  = parseInt(to.substring(0,2));
                var mon2 = parseMon(to.substring(3,6));
                var yr2  = parseInt(to.substring(7,11));
                
                var date1 = new Date(yr1, mon1, dt1);
                var date2 = new Date(yr2, mon2, dt2);
                if (date1 > date2){
                    alert("Date From must be smaller than date To!");
                }
            }
        </script>
     
        <div>
        <form method="post" action="">
        <style type="text/css">
             p { color: gray; font: 12pt/16pt Franklin Gothic Demi, fantasy, cursive, Serif }
        </style>
        <p>Date from: </p>
        <script>DateInput('from', true, 'DD-MON-YYYY' , '{defaultFrom}')</script>
        
        <p>to: </p>
        
        <script>DateInput('to', true, 'DD-MON-YYYY' , '{defaultTo}')</script>
        
        
        <input name ="submit" type="submit" onclick = "checkFromTo(this.form.from.value, this.form.to.value);"  value="" class="form-submit2" />
        </form>
		</div>
		<!-- ================================================== -->
		
			<div  class="bg3" rowspan="2">
			<p>Export data to</p>
			<a  href="{bstoViewPath}exportExcel.php">
			<br>
			<img height="41" border="0" src="{bstoViewPath}images/excel.png">
			</a>
			<a  href="{bstoViewPath}exportWord.php">
			<img  height="41" border="0" src="{bstoViewPath}images/word.png">	
			</a>
			</div>
		<!-- ================================================== -->


